<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
  <script type="text/javascript" src="../vue.js"></script>

</head>

<body>

<!--
        Vue中有2种数据绑定的方式：
            1.单项绑定（v-bind）： 数据只能从data流向页面
            2.双向绑定（v-model）： 数据不仅能够从data流向页面，也能从页面流向data
                备注：
                    1.双向绑定一般都应用在表单类元素上 如：input ， select.....
                    2.v-model：value 可以简写为 v-model ， 因为v-model默认收集的就是 value 值。

-->
<!--准备好一个容器-->
<div id="root" >
<!-- 单向绑定数据 <input type="text" v-bind:value="name" ><br/>-->
<!-- 双向向绑定数据 <input type="text" v-model:value="name">-->


<!--    简写-->
    单向绑定数据 <input type="text" :value="name" ><br/>
    双向绑定数据 <input type="text" v-model="name">
</div>

</body>


<script type="text/javascript">

    Vue.config.productionTip = false
    new Vue({
        el: '#root',
        data:{
            name:'百度'
        }
    })


</script>

</html>